<!DOCTYPE html>
<html>

<head>
    <title>服务评价</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="北京规划院 移动办公 OA 自动化">
    <link rel="stylesheet" href="../css/weui.min.css">
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="shortcut icon" href="#" />

    <style type="text/css">
        /*去掉灰色的分割横线*/

        .weui-form-preview:after {
            border-bottom: 0px;
        }

        .weui-form-preview__hd:after {
            border-bottom: 0px;
        }

        .weui-cells:after {
            border-bottom: 0px;
        }
        /*避免jquery-weui.css与weui.min.css样式冲突问题*/

        .jquery-weui-conflict-weui-min {
            opacity: 1;
            visibility: visible;
        }

        .my-color {
            color: #00F7DE;
        }

        html,
        body,
        .page {
            height: 100%;
            background-color: #F0EFF5;
        ;
        }
        /*星级评价*/

        .star {
            background: url(../images/star.png);
            height: 20px;
            width: 95px;
            position: relative;
            float: left;
            margin-top: 5px;
            margin-left: 20px
        }

        .star a {
            width: 19px;
            height: 20px;
            float: left;
            text-indent: -9999em;
            position: relative;
            z-index: 1;
        }

        .star .inner {
            background: url(../images/star.png) 0 20px;
            height: 19px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .star-1 .inner {
            width: 19px;
        }

        .star-2 .inner {
            width: 38px;
        }

        .star-3 .inner {
            width: 57px;
        }

        .star-4 .inner {
            width: 76px;
        }

        .star-5 .inner {
            width: 95px;
        }
        .weui-cell:before{
            border-top: 0;
        }

        /* 司机照片 */
        .driver-img {
            width: 70px;
            margin:0 auto;
            border-radius:50%;
            border-width: 0.5px;
            border-style: solid;
            border-color: #888888;
        }

        .selected-driver-img {
            border-color: #7FFFAA;
        }

        .selected-driver-name {
            color: #7FFFAA;
        }
    </style>
</head>

<body>
<!-- 基本信息页面 -->
<div class="page input js_show">
    <div class="page__bd">
        <div style="width: 95%;margin: 0 auto;">

            <div class="weui-cells" style="margin-top: 5px;">
                <div class="weui-cell" id="driver-list" style="margin-right: 10%; margin-left: 10%">
                    <div class="weui-cell__bd" >
                        <div class="weui-flex" id="flex-driver-img">
                            <div class="weui-flex__item" ></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="weui-cells" style="margin-top: 5px;">
                <!-- 内容部分 -->
                <div class="weui-form-preview">
                    <div class="weui-form-preview__hd" style="text-align: center">
                        <span>请您评价本次服务！</span>
                    </div>
                    <div class="weui-form-preview__bd" style="width:250px;margin:0 auto; text-align: center">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label" style="margin-left: 22px">服务态度</label>
                            <div class="star" id="star">
                                <div class="inner"></div>
                                <a href="javascript:void(0);" title="1"></a>
                                <a href="javascript:void(0);" title="2"></a>
                                <a href="javascript:void(0);" title="3"></a>
                                <a href="javascript:void(0);" title="4"></a>
                                <a href="javascript:void(0);" title="5"></a>
                            </div>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label" style="margin-left: 22px">驾驶技术</label>
                            <div class="star" id="star2">
                                <div class="inner"></div>
                                <a href="javascript:void(0);" title="1"></a>
                                <a href="javascript:void(0);" title="2"></a>
                                <a href="javascript:void(0);" title="3"></a>
                                <a href="javascript:void(0);" title="4"></a>
                                <a href="javascript:void(0);" title="5"></a>
                            </div>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label" style="margin-left: 22px">整体感受</label>
                            <div class="star" id="star3">
                                <div class="inner"></div>
                                <a href="javascript:void(0);" title="1"></a>
                                <a href="javascript:void(0);" title="2"></a>
                                <a href="javascript:void(0);" title="3"></a>
                                <a href="javascript:void(0);" title="4"></a>
                                <a href="javascript:void(0);" title="5"></a>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="weui-cell" style="padding: 8px 15px 20px;">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" style="border: 1px solid #ddd;" id="evaluation-message" placeholder="本次服务您还满意吗？说出您的真实感受，有助于我们更好的为您服务～" rows="5"></textarea>
                        <!-- 发送按钮 -->
                        <div class="weui-textarea-counter">
                            <!--<span>0</span>/200-->
                        </div>

                    </div>
                </div>
            </div>

        </div>

        <!-- 提交按钮 -->
        <div class="weui-flex" style="margin: 0 auto;margin-top: 15px;width: 95%;border-radius:3px;color: #fff; background-color:#3285FF;display: none;" id="one">
            <!--<div class="weui-flex__item"  style="margin-right:30px;">-->
            <div class="weui-flex__item">
                <a href="javascript:;" class="weui-btn weui-btn_warn" style="background-color: #3285FF; color: #fff" id="save">提交</a>
            </div>
        </div>

        <!-- 下面都是操作提示框 -->
        <!-- toast-->
        <div id="toast" style="opacity: 1; display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast jquery-weui-conflict-weui-min">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content"></p>
            </div>
        </div>

        <!--loadingToast-->
        <div id="loadingToast" style="opacity: 1; display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast jquery-weui-conflict-weui-min">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content"></p>
            </div>
        </div>

        <!-- iosDialog2 -->
        <div class="js_dialog" id="dialog" style=" display: none;">
            <div class="weui-mask jquery-weui-conflict-weui-min"></div>
            <div class="weui-dialog jquery-weui-conflict-weui-min">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title" id="strong"></strong></div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="iknow">知道了</a>
                </div>
            </div>
        </div>

        <!-- iosDialog -->
        <div class="js_dialog" id="cancelDialog" style="display:none">
            <div class="weui-mask jquery-weui-conflict-weui-min"></div>
            <div class="weui-dialog jquery-weui-conflict-weui-min">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title">服务取消后不可恢复，确定取消这次服务码？</strong></div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" id="cancelNo">取消</a>
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="cancelYes">确定</a>
                </div>
            </div>
        </div>

    </div>

</div>
<script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.touchSwipe.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="../js/my-js/serviceEvaluation.js"></script>
</body>
</html>